<template>
   <div class="MoneyWrap">
        <!--成交中心头部-->
      <div class="MoneyHeader">统计时间：<span>2019-07-25 20:24</span></div>
      <!--成交中心第二块-->
      <div class="MoneyTwo">
          账户资金
      </div>
       <div class="pan">
          <div class="from">
            <div class="row">
              <span class="left">提现银行卡号</span>
              <span class="right"><input v-model="inputO" class="input" type="text"/></span>
            </div>
            <div class="row">
              <span class="left">可提现余额</span>
              <span class="right"><span style="color: #FB6451;">{{balance}}</span><span style="font-weight: bold;">元</span></span>
            </div>
            <div class="row">
              <span class="left">提现金额</span>
              <span class="right"><input v-model="inputT" type="text"/><span class="right_ri">元</span></span>
            </div>
            <div class="row_right">
              <i class="el-icon-warning" style="color:orange;"></i>
              <span class="warn">注：单笔提现金额最小为1000元，最大为10万元。</span>
            </div>
            <div class="row">
              <span class="left">提现绑定银行卡手机号</span>
              <span class="right">
                <input v-if="phoneNum" class="none" disabled="false" v-model="bankPhone" type="text"/>
                <input v-if="!phoneNum" class="noAne" v-model="bankPhone" type="text"/>
                <span class="phone" @click="change">{{phoneNum?'修改手机号':'完成'}}</span>
               </span>
            </div>
            <div class="row">
              <span class="left">输入图形验证码</span>
              <span class="right"> <input v-model="inputP" type="text"/> <span class="right_ri right_T">{{yanzheng}}</span></span>
            </div>
            <div class="row">
              <span class="left">短信验证码</span>
              <span class="right"><input v-model="inputM" type="text"/> <span  :class=" isZero ?'newWid right_ri right_L':'right_ri right_L'" @click="getCode">{{CodeText}}</span></span>
            </div>
          </div>
          <!-- 按钮 -->
           <div class="subGroup">
             <span class="btn_one" @click="affirm">
               确认提现
             </span>
             <span class="btn_two" @click="cancel">
               取消提现
             </span>
           </div>
           <div class="bottom">
              温馨提示:预计到账1-2个工作日，周末节假8可能延迟，以实际到账时间为准。
           </div>
       </div>
       <!-- 遮罩层 -->
       <div>
          <div class="mask" v-if="banner" @click="closeBanner"></div>
          <div class="mask_content" v-if="banner">
              <div class="mask_top">友情提示</div>
              <div class="mask_middle">首次提现需要交纳保证金</div>
              <div class="mask_down"><u @click="jump">去缴纳保证金</u></div>
          </div>
       </div>

    </div>
</template>

<script>
  export default {
      name: "subMoney",
      data(){
          return {
            inputO:'',
            inputT:'',
            inputP:'',
            inputM:'',
            balance:'1006.82',
            yanzheng:'YCKR1',
            bankPhone:'1234578655',
            phoneNum:true,
            CodeText: "获取验证码",
            // 获取手机验证码倒计时是否为0
            isZero: false,
            banner:false
          }
      },
      methods: {
        //修改手机号
          change(){
            this.phoneNum=!this.phoneNum;
            this.bankPhone=this.bankPhone;
          },
          //获取验证码
          getCode(){
            var num=60;
            if(this.isZero){
                // 如果正在倒计时弹出请60秒后再试
                this.$message.closeAll();
                this.$message({
                    message: '请60秒后再试!',
                    type: 'warning'
                });
                return;
            }
            this.isZero = true;
            num = num - 1;
            this.CodeText = "重新获取（" + num + "s）";
            var getCode = setInterval(()=>{
                if(num == 1){
                    this.isZero = false;
                    clearInterval(getCode);
                    this.CodeText = "获取验证码";
                    return;
                }
                num = num - 1;
                this.CodeText = "重新获取（" + num + "s）";
            },1000);
          },
          //确认提现
          affirm(){
            this.banner=true;
          },
          //取消
          cancel(){
           this.$router.push({ path:'/Money'});
          },
           //关闭遮罩层
           closeBanner(){
             this.banner=!this.banner
           },
           //跳转新页面
           jump(){
             this.$router.push('/SAccountCapital/deposit');
           }
      },
      mounted(){
      }
  }
</script>

<style scoped>
  .MoneyWrap{
       width:1015px;
   }
   .MoneyHeader{
       height:33px;
       line-height:33px;
       background:#FFFFFF;
       font-size:14px;
       font-weight:400;
       color:#1296DB;
       text-indent: 28px;
   }
   .MoneyHeader span{
       color:#1296DB;
   }
  /* 第二块 */
     .MoneyTwo{
         height:40px;
         line-height: 40px;
         background:#FFFFFF;
         font-size:19px;
         font-weight:400;
         color:rgba(0,0,0,1);
         text-indent: 28px;
         margin: 20px 0 15px;
         border-bottom:1px #FB6451 solid ;
     }
     .pan{
        margin-top: 29px;
        padding-top: 30px;
        width: 100%;
        height: 567px;
        background: #FFFFFF;
     }
     .pan .from{
        margin-left:85px ;
        font-size:24px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
     }
     .pan .from .row{
        line-height: 65px;
     }

     .pan .from .row .left{
       display: inline-block;
       width: 276px;
     }
      .row_right{
        margin-left: 285px;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
      }
     .pan .from .row input{
      border: 1px #00B4FF solid;
      width: 177px;
     }
     .pan .from .row .input{
      width: 464px;
     }
     .pan .from .row .none{
       border: none;
       background: #FFFFFF;
     }
     .pan .from .row .phone{
       cursor: pointer;
       font-size: 10px;
       color: #00B4FF ;
     }
      .pan .from .row .right_ri{
        margin-left:12px ;
      }

      .pan .from .row .right_T{
         display: inline-block;
         text-align: center;
         background:  #DCDCDC;
         line-height: 34px;
        width: 154px;
      }
      .pan .from .row .right_L{
        display: inline-block;
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        width: 136px;
        background: #FAFAFA;
        border: 1px #D9D9D9 solid;
        color:#FB6451;
      }
       .pan .from .row .newWid{
          text-align: center;
          width: 150px;
      }
     .subGroup{
       margin-top: 60px;
       text-align: center;
     }
      .subGroup .btn_one,.btn_two{
        display: inline-block;
        font-size:18px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
         width: 164px;
         line-height:32px ;
         cursor:pointer;
      }
      .subGroup .btn_one{
        background: #FB6451;
        color: #FFFFFF;
      }
      .subGroup .btn_two{
        margin-left: 72px;
         background:#DCDCDC;
      }
      .bottom{
        /* margin-top: 30px; */
        text-align: center;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(143,143,143,1);
        line-height:65px;
      }
      .mask{
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 888;
      }
      .mask_content{
        background: #FFFFFF;
        width:719px;
        height: 280px;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 88888;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size:30px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color: #000000;
      }
      .mask_content .mask_top{
        margin-top: 40px;
        line-height:65px;
      }
      .mask_content .mask_middle{
        color: #FB6451;
        line-height:65px;
      }
      .mask_content .mask_down u{
        cursor:pointer;
       font-size: 18px;
       color: #00B4FF ;
        line-height:65px;
      }
</style>
